<template>
    <div id="container">
        <div id="viewDiv"></div>
        <el-main style="position:absolute;left:5px;top:5px; background-color:rgb(255,255,255);box-shadow:0 0 5px gray;">
            <div style="display:flex;flex-direction:row;align-items: center;width:100%;">
                <span>按名称搜索:&nbsp;</span>
                <el-input prefix-icon="Search" style="width:180px;margin-right:10px;" v-model="按名称查询" ></el-input>
                <el-button   type="danger" plain @click="重置_click">重置</el-button>
                <el-button  type="success" plain @click="按名称查询_click">搜索</el-button>
            </div>
            <el-table style="width:100%;height:300px;" :style="{display:table_display}" :data="table_data" 
            show-header @row-dblclick="table_dblclick" >
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>
        </el-main>
   </div>
</template>
   
<script setup>
import {onMounted,ref} from 'vue'
import {ElMessageBox} from 'element-plus'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import * as queryClass from '@arcgis/core/rest/query'
import Query from '@arcgis/core/rest/support/Query'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
var map,view,query,查询结果要素图层
var source=[]
var queryURL="https://ws8575.club/web/rest/services/Hosted/地图发布测试_要素图层_查询上限2W_3857/FeatureServer/0"
const 按名称查询=ref('亚星花园')//输入的查询字符串
const table_display=ref('none')//控制表格显隐的变量
const table_data=ref([])//表格的双向绑定变量
var 按名称查询_click=()=>{//核心代码,点击查询按钮执行
    if(!按名称查询.value){//判断查询字符串是否为空,如果为空则打断执行
        return
    }
    table_data.value=[]
    table_display.value="none"
    source=[]
    map.remove(查询结果要素图层)
    query=new Query({//创建查询参数对象
        returnGeometry:true,//设置为查询结果返回要素几何
        where:`name like '%${按名称查询.value}%'`,//设置查询条件,语法跟SQL语法一致且支持各种类型的通配符
        outFields:["*"]//设置查询返回的要素的字段,设置为"*"则返回要素的所有字段
    })
    queryClass.executeQueryJSON(queryURL,query).then((featureSet)=>{//执行查询
        if(featureSet.features[0]){//判断查询返回的结果是否为null,如果不为null,则继续执行
            source=featureSet.features//获取查询返回的图形集合
            table_data.value=featureSet.features.map((item)=>{//获取要素属性的集合,传值给表格的双向绑定变量
                return item.attributes
            })
            table_display.value="block"//显示表格
            查询结果要素图层=new FeatureLayer({//利用查询返回的图形集合,创建为一个要素图层并设置符号和标注
                source:source,
                title:"查询结果",
                objectIdField:"objectid",
                fields:[
                    {name:"name",alias:"地块名称",type:"string"},
                    {name:'address',alias:'地址',type:'string'},
                ],
                geometryType:'polygon',
                labelingInfo:[{
                    labelExpressionInfo:{
                        expression:`$feature.name`
                    },
                    minScale:30000,
                    symbol:{
                        type:'text',
                        font:{
                            size:12
                        },
                        color:[50,50,200],
                        haloColor:[255,255,255],
                        haloSize:1
                    }
                }],
                renderer:{
                    type:"simple",
                    symbol:{
                        type:"simple-fill",
                        color:[50,50,200,0.5],
                        outline:{
                            color:[50,50,200],
                            width:1
                        }
                    }
                }
            })
            map.add(查询结果要素图层)//向map对象添加这个图层
        }else{
            alert("未返回结果!")
        }
    })
}
var 重置_click=()=>{
    source=[]
    table_data.value=[]
    table_display.value="none"
    按名称查询.value=""
    map.remove(查询结果要素图层)
}
var table_dblclick=(event)=>{//双击表格上的某个条目事件的处理函数
    for(let item of source){//遍历source(存储了查询返回的图形集合)中的图形对象
        if(item.attributes.name===event.name){//如果双击对应的条目的name的值是否跟图形的name属性值一致,执行view.goTo
            view.goTo({
                zoom:18,
                target:item.geometry.centroid
            },{
                duration:500
            })
        }
    }
}
onMounted(()=>{
    map=new Map({
        basemap:"satellite"
    })
    view=new MapView({
        map:map,
        container:"viewDiv",
        center:[120.4,36.1],
        zoom:12,
        constraints:{
            rotationEnabled:false,
            maxScale:2000
        }
    })
    view.ui.remove(["zoom","attribution"])
})
</script>

<style scoped>
#container,#viewDiv{
  width:100%; height:100%; padding:0;margin:0;
}
span{
    vertical-align: middle;
    white-space: pre-line;
}
</style>
